<template>
  <view class="order-list">
    <!-- 订单状态切换栏 -->
    <view class="status-bar">
      <view 
        v-for="(tab, index) in statusTabs" 
        :key="index"
        class="status-item"
        :class="{ active: currentStatus === tab.value }"
        @tap="switchStatus(tab.value)"
      >
        <text>{{ tab.label }}</text>
        <text class="count" v-if="tab.count > 0">({{ tab.count }})</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      :style="{ height: scrollHeight + 'px' }"
    >
      <!-- 加载中提示 -->
      <view class="loading-state" v-if="isLoading && !orders.length">
        <text>加载中...</text>
      </view>

      <!-- 空状态提示 -->
      <view class="empty-state" v-if="!isLoading && !orders.length">
        <image src="/static/empty-order.png" mode="aspectFit"></image>
        <text>暂无相关订单</text>
      </view>

      <!-- 订单列表内容 -->
      <view 
        class="order-item" 
        v-for="order in orders" 
        :key="order.orderId"
        :class="{ highlight: order.orderId === highlightOrderId }"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-no">订单号：{{ order.orderId }}</text>
          <text class="order-status" :class="{
            'status-pending-payment': order.status === STATUS_CODES.PENDING_PAYMENT || order.orderStatus === STATUS_CODES.PENDING_PAYMENT,
            'status-pending-delivery': order.status === STATUS_CODES.PENDING_DELIVERY || order.orderStatus === STATUS_CODES.PENDING_DELIVERY,
            'status-pending-receive': order.status === STATUS_CODES.PENDING_RECEIVE || order.orderStatus === STATUS_CODES.PENDING_RECEIVE,
            'status-completed': order.status === STATUS_CODES.COMPLETED || order.orderStatus === STATUS_CODES.COMPLETED,
            'status-cancelled': order.status === STATUS_CODES.CANCELLED || order.orderStatus === STATUS_CODES.CANCELLED,
            'status-payment-failed': order.status === STATUS_CODES.PAYMENT_FAILED || order.orderStatus === STATUS_CODES.PAYMENT_FAILED
          }">{{ getStatusText(order.status || order.orderStatus) }}</text>
        </view>

        <!-- 订单商品列表 -->
        <view 
          class="order-goods"
          @tap="navigateToDetail(order.orderId)"
        >
          <view class="goods-item" v-for="(item, index) in order.orderItems" :key="index">
            <image :src="item.imageUrl || '/static/medicine-default.png'" mode="aspectFill"></image>
            <view class="goods-info">
              <text class="goods-name">{{ item.medicineName }}</text>
              <text class="goods-spec">{{ item.specification }}</text>
              <view class="price-quantity">
                <text class="price">¥{{ item.price }}</text>
                <text class="quantity">x{{ item.quantity }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 订单金额信息 -->
        <view class="order-amount">
          <text>共{{ getOrderItemsCount(order) }}件商品</text>
          <text>实付：<text class="amount">¥{{ order.actualPayment }}</text></text>
        </view>

        <!-- 订单操作按钮 -->
        <view class="order-actions">
          <template v-if="order.orderStatus === STATUS_CODES.PENDING_PAYMENT || order.status === STATUS_CODES.PENDING_PAYMENT">
            <button class="btn cancel" @tap="cancelOrder(order)">取消订单</button>
            <button class="btn primary" @tap="payOrder(order)">立即支付</button>
          </template>
          <template v-else-if="order.orderStatus === STATUS_CODES.PENDING_DELIVERY || order.status === STATUS_CODES.PENDING_DELIVERY">
            <button class="btn default" @tap="viewLogistics(order)">查看物流</button>
          </template>
          <template v-else-if="order.orderStatus === STATUS_CODES.PENDING_RECEIVE || order.status === STATUS_CODES.PENDING_RECEIVE">
            <button class="btn default" @tap="viewLogistics(order)">查看物流</button>
            <button class="btn primary" @tap="confirmReceive(order)">确认收货</button>
          </template>
          <template v-else-if="order.orderStatus === STATUS_CODES.COMPLETED || order.status === STATUS_CODES.COMPLETED">
            <button class="btn default" @tap="viewLogistics(order)">查看物流</button>
            <button class="btn primary" @tap="buyAgain(order)">再次购买</button>
          </template>
          <template v-else-if="order.orderStatus === STATUS_CODES.CANCELLED || order.status === STATUS_CODES.CANCELLED">
            <button class="btn default" @tap="deleteOrder(order)">删除订单</button>
            <button class="btn primary" @tap="buyAgain(order)">再次购买</button>
          </template>
          <template v-else-if="order.orderStatus === STATUS_CODES.PAYMENT_FAILED || order.status === STATUS_CODES.PAYMENT_FAILED">
            <button class="btn cancel" @tap="cancelOrder(order)">取消订单</button>
            <button class="btn primary" @tap="payOrder(order)">重新支付</button>
          </template>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more" v-if="orders.length > 0">
        <text v-if="isLoading">加载中...</text>
        <text v-else-if="hasMore">上拉加载更多</text>
        <text v-else>没有更多订单了</text>
      </view>
    </scroll-view>

    <!-- 支付二维码弹窗 -->
    <view v-if="showQRCode" class="qrcode-popup-overlay" @click="closeQRCode">
      <view class="qrcode-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">使用微信扫码支付</text>
          <text class="close-btn" @click="closeQRCode">×</text>
        </view>
        <view class="qrcode-content">
          <view v-if="qrCodeUrl" class="qrcode-wrapper">
            <image 
              :src="qrCodeUrl" 
              mode="aspectFit" 
              class="qrcode-image"
              @error="handleQRCodeError"
              @load="handleQRCodeLoad"
            ></image>
            <text class="price" v-if="currentOrder">¥{{ currentOrder.actualPayment }}</text>
          </view>
          <view v-else class="loading-wrapper">
            <text class="loading">正在生成支付二维码...</text>
          </view>
        </view>
        <view class="qrcode-footer">
          <text class="tip">请使用微信扫一扫完成支付</text>
          <text class="order-number" v-if="currentOrder">订单号：{{ currentOrder.orderId }}</text>
          <view class="qrcode-buttons">
            <button class="qr-btn cancel" @tap="closeQRCode">取消支付</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderApi } from '@/api/order'
import auth from '@/utils/auth'
import { orderMedicineApi } from '@/api/orderMedicine'

export default {
  data() {
    return {
      // Status code mapping
      STATUS_CODES: {
        ALL: '',
        PENDING_PAYMENT: 0,  // 待付款
        PENDING_DELIVERY: 1, // 待发货
        PENDING_RECEIVE: 2,  // 待收货
        COMPLETED: 3,        // 已完成
        CANCELLED: 4,        // 已取消
        PAYMENT_FAILED: 5,   // 支付失败
        REFUNDED: 6,        // 已退款
        SHIPPED: 7,         // 已发货
        PAID: 8,           // 已支付
        CLOSED: -1         // 已关闭
      },
      statusTabs: [
        { label: '全部', value: 'ALL', count: 0 },
        { label: '待付款', value: 'PENDING_PAYMENT', count: 0 },
        { label: '待发货', value: 'PENDING_DELIVERY', count: 0 },
        { label: '待收货', value: 'PENDING_RECEIVE', count: 0 },
        { label: '已完成', value: 'COMPLETED', count: 0 },
        { label: '已取消', value: 'CANCELLED', count: 0 }
      ],
      currentStatus: 'ALL',
      orders: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false,
      scrollHeight: 0,
      highlightOrderId: null,
      qrCodeUrl: '',
      showQRCode: false,
      currentOrder: null,
      outTradeNo: '',
      paymentStatusTimer: null,
      checkCount: 0,
      paymentAmount: 0,
      currentOrderId: '',
      showQRCodePopup: false
    }
  },

  onLoad(options) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '我的订单'
    });

    // 获取系统信息设置滚动区域高度
    const systemInfo = uni.getSystemInfoSync();
    // 状态栏高度 + 顶部状态切换栏高度(100rpx)
    this.scrollHeight = systemInfo.windowHeight - uni.upx2px(100);

    // 设置当前状态
    if (options.status) {
      this.currentStatus = options.status;
    }

    // 设置高亮订单
    if (options.highlight) {
      this.highlightOrderId = options.highlight;
    }

    // 加载订单数据
    this.loadOrders();
    
    // 获取各状态订单数量
    this.loadOrderCounts();
  },

  methods: {
    // 切换订单状态
    switchStatus(status) {
      if (this.currentStatus === status) return;
      this.currentStatus = status;
      this.orders = [];
      this.page = 1;
      this.hasMore = true;
      this.loadOrders();
    },

    // 处理订单号，使用 BigInt 确保精度
    getOriginalOrderId(orderId) {
      if (!orderId) return '';
      try {
        // 使用 BigInt 处理订单号
        return BigInt(orderId).toString();
      } catch (error) {
        console.error('订单号处理错误:', error);
        return String(orderId);
      }
    },

    // 加载订单列表
    async loadOrders() {
      if (this.isLoading || !this.hasMore) return;

      try {
        this.isLoading = true;
        const userId = auth.getUserIdentifier();
        if (!userId) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
          return;
        }

        const response = await orderMedicineApi.getOrderList({
          userId,
          status: this.currentStatus === 'ALL' ? '' : this.STATUS_CODES[this.currentStatus],
          page: this.page,
          pageSize: this.pageSize
        });

        console.log('订单列表原始响应:', response);

        if (response.code === 200) {
          // 使用 BigInt 处理订单号
          const processedOrders = (response.data || []).map(order => {
            const orderData = {
              ...order,
              orderId: this.getOriginalOrderId(order.orderId),
              orderItems: (order.orderItems || []).map(item => ({
                ...item,
                orderId: this.getOriginalOrderId(item.orderId)
              }))
            };

            console.log('订单处理:', {
              原始订单号: order.orderId,
              处理后订单号: orderData.orderId,
              订单完整信息: orderData
            });

            return orderData;
          });

          if (this.page === 1) {
            this.orders = processedOrders;
          } else {
            this.orders = [...this.orders, ...processedOrders];
          }

          this.hasMore = processedOrders.length === this.pageSize;
          this.page++;
        } else {
          throw new Error(response.errorMessage || '获取订单列表失败');
        }
      } catch (error) {
        console.error('加载订单失败:', error);
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 加载各状态订单数量
    async loadOrderCounts() {
      try {
        const userId = auth.getUserIdentifier();
        if (!userId) return;

        console.log('开始获取订单数量, userId:', userId);

        // 获取所有订单
        const res = await orderMedicineApi.getOrderList({
          userId: userId,
          status: '',
          page: 1,
          pageSize: 1000 // 获取足够多的订单以计算数量
        });

        console.log('订单总数响应:', JSON.stringify(res, null, 2));

        if (res.code === 200) {
          // 确保返回的数据是数组
          const allOrders = Array.isArray(res.data) ? res.data : [];
          
          // 计算各状态订单数量
          const counts = {
            ALL: allOrders.length,
            PENDING_PAYMENT: 0,
            PENDING_DELIVERY: 0,
            PENDING_RECEIVE: 0,
            COMPLETED: 0,
            CANCELLED: 0
          };

          // 统计各状态订单数量
          allOrders.forEach(order => {
            const status = parseInt(order.status);
            if (status === this.STATUS_CODES.PENDING_PAYMENT) counts.PENDING_PAYMENT++;
            else if (status === this.STATUS_CODES.PENDING_DELIVERY) counts.PENDING_DELIVERY++;
            else if (status === this.STATUS_CODES.PENDING_RECEIVE) counts.PENDING_RECEIVE++;
            else if (status === this.STATUS_CODES.COMPLETED) counts.COMPLETED++;
            else if (status === this.STATUS_CODES.CANCELLED) counts.CANCELLED++;
          });

          console.log('最终订单数量统计:', counts);

          // 更新状态标签的数量
          this.statusTabs = this.statusTabs.map(tab => ({
            ...tab,
            count: counts[tab.value] || 0
          }));
        }
      } catch (error) {
        console.error('获取订单数量失败:', error);
      }
    },

    // 获取订单状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'status-pending-payment',
        1: 'status-pending-delivery',
        2: 'status-pending-receive',
        3: 'status-completed',
        4: 'status-cancelled'
      };
      return classMap[status] || '';
    },

    // 获取订单状态文本
    getStatusText(status) {
      console.log('当前订单状态:', status);
      const statusMap = {
        0: '待付款',
        1: '待发货',
        2: '待收货',
        3: '已完成',
        4: '已取消',
        5: '支付失败',
        6: '已退款',
        7: '已发货',
        8: '已支付',
        '-1': '已关闭'
      };
      return statusMap[status] || '待付款';  // 默认显示"待付款"而不是"未知状态"
    },

    // 获取订单状态文本颜色
    getStatusColor(status) {
      const colorMap = {
        0: '#ff5500', // 待付款 - 橙色
        1: '#2d8cf0', // 待发货 - 蓝色
        2: '#19be6b', // 待收货 - 绿色
        3: '#999999', // 已完成 - 灰色
        4: '#ed4014'  // 已取消 - 红色
      };
      return colorMap[status] || '#666666';
    },

    // 获取订单商品总数
    getOrderItemsCount(order) {
      return order.orderItems ? order.orderItems.reduce((total, item) => total + (item.quantity || 0), 0) : 0;
    },

    // 跳转到订单详情
    navigateToDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/order-detail?orderId=${orderId.toString()}`,
        fail: (err) => {
          console.error('跳转订单详情失败:', err);
          uni.showToast({
            title: '打开订单详情失败',
            icon: 'none'
          });
        }
      });
    },

    // 取消订单
    cancelOrder(order) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const userId = auth.getUserIdentifier();
              const result = await orderApi.cancelOrder(order.orderId.toString(), userId);
              
              if (result.code === 200) {
                uni.showToast({
                  title: '订单已取消',
                  icon: 'success'
                });
                // 刷新订单列表和计数
                this.refreshOrders();
              } else {
                throw new Error(result.msg || '取消订单失败');
              }
            } catch (error) {
              console.error('取消订单失败:', error);
              uni.showToast({
                title: error.message || '取消失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 支付订单
    async payOrder(order) {
      try {
        if (!order || !order.orderId) {
          uni.showToast({
            title: '订单信息不完整',
            icon: 'none'
          });
          return;
        }

        // 使用 BigInt 处理订单号
        const orderId = this.getOriginalOrderId(order.orderId);
        
        console.log('开始支付，订单信息:', {
          订单号: orderId,
          订单号类型: typeof orderId,
          原始订单信息: order
        });

        // 获取订单详情
        const orderDetail = await orderMedicineApi.getOrderDetail(orderId);
        console.log('订单详情:', orderDetail);

        if (!orderDetail || orderDetail.code !== 200 || !orderDetail.data) {
          throw new Error('获取订单详情失败');
        }

        // 发起支付，确保传递正确的订单号和金额
        const totalFee = Math.round(orderDetail.data.actualPayment * 100);
        const payParams = {
          orderId: orderId,
          paymentType: 'WECHAT',
          totalFee: totalFee.toString() // 确保金额是字符串类型
        };
        
        console.log('支付请求参数:', {
          订单号: orderId,
          订单号类型: typeof orderId,
          支付金额: payParams.totalFee,
          完整参数: payParams
        });
        
        const payResult = await orderMedicineApi.payOrder(payParams);

        console.log('支付结果:', payResult);

        if (payResult.code === 200 && payResult.data) {
          this.qrCodeUrl = payResult.data.qrCodeImage;
          this.paymentAmount = orderDetail.data.actualPayment;
          this.currentOrderId = orderId;
          this.outTradeNo = payResult.data.outTradeNo;
          this.currentOrder = orderDetail.data;
          this.showQRCode = true;

          // 开始检查支付状态
          this.startPaymentStatusCheck();
        } else {
          throw new Error(payResult.errorMessage || '获取支付二维码失败');
        }
      } catch (error) {
        console.error('支付失败:', error);
        uni.showToast({
          title: error.message || '支付失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    },

    // 开始检查支付状态
    startPaymentStatusCheck() {
      if (this.paymentStatusTimer) {
        clearTimeout(this.paymentStatusTimer);
      }
      
      this.checkCount = 0;
      this.checkPaymentStatus();
    },

    // 检查支付状态
    async checkPaymentStatus() {
      try {
        if (this.checkCount >= 60) {
          this.handlePayTimeout();
          return;
        }

        console.log('检查支付状态:', {
          交易号: this.outTradeNo,
          订单号: this.currentOrderId
        });

        const res = await orderMedicineApi.checkPayStatus({
          outTradeNo: this.outTradeNo,
          orderId: this.currentOrderId // 添加订单号参数
        });

        console.log('支付状态检查响应:', res);

        if (res.code === 200) {
          if (res.status === 'SUCCESS') {
            this.handlePaymentSuccess();
            return;
          } else if (res.status === 'FAIL' || res.status === 'CLOSED') {
            this.handlePaymentError();
            return;
          }
        }

        this.checkCount++;
        this.paymentStatusTimer = setTimeout(() => {
          this.checkPaymentStatus();
        }, 3000);
      } catch (error) {
        console.error('检查支付状态失败:', error);
        this.paymentStatusTimer = setTimeout(() => {
          this.checkPaymentStatus();
        }, 3000);
      }
    },

    // 处理支付成功
    handlePaymentSuccess() {
      clearTimeout(this.paymentStatusTimer);
      this.showQRCode = false;
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      });
      this.refreshOrders();
    },

    // 处理支付超时
    handlePayTimeout() {
      clearTimeout(this.paymentStatusTimer);
      this.showQRCode = false;
      uni.showToast({
        title: '支付超时，请重试',
        icon: 'none'
      });
    },

    // 处理支付错误
    handlePaymentError() {
      clearTimeout(this.paymentStatusTimer);
      this.showQRCode = false;
      uni.showToast({
        title: '支付失败，请重试',
        icon: 'none'
      });
    },

    // 关闭二维码弹窗
    closeQRCode() {
      uni.showModal({
        title: '提示',
        content: '确定要取消支付吗？',
        success: (res) => {
          if (res.confirm) {
            if (this.paymentStatusTimer) {
              clearInterval(this.paymentStatusTimer);
            }
            this.showQRCode = false;
            this.qrCodeUrl = '';
          }
        }
      });
    },

    // 查看物流
    viewLogistics(order) {
      uni.navigateTo({
        url: `/pages/order/logistics?orderId=${order.orderId.toString()}`,
        fail: (err) => {
          console.error('跳转物流页面失败:', err);
          uni.showToast({
            title: '打开物流页面失败',
            icon: 'none'
          });
        }
      });
    },

    // 确认收货
    confirmReceive(order) {
      uni.showModal({
        title: '提示',
        content: '确认已收到商品吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await orderMedicineApi.updateOrderStatus({
                orderId: order.orderId.toString(),
                status: this.STATUS_CODES.COMPLETED
              });
              
              if (result.code === 200) {
                uni.showToast({
                  title: '确认收货成功',
                  icon: 'success'
                });
                this.refreshOrders();
              } else {
                throw new Error(result.msg || '确认收货失败');
              }
            } catch (error) {
              console.error('确认收货失败:', error);
              uni.showToast({
                title: error.message || '操作失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 再次购买
    buyAgain(order) {
      // 将订单商品添加到结算页
      try {
        const checkoutItems = order.orderItems.map(item => ({
          medicineId: item.medicineId,
          medicineName: item.medicineName,
          specification: item.specification,
          dosageForm: item.dosageForm,
          price: item.price,
          quantity: item.quantity,
          imageUrl: item.imageUrl
        }));

        uni.setStorageSync('checkoutItems', checkoutItems);
        
        // 跳转到确认订单页
        uni.navigateTo({
          url: '/pages/pharmacy/order-confirm'
        });
      } catch (error) {
        console.error('再次购买失败:', error);
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        });
      }
    },

    // 删除订单
    deleteOrder(order) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await orderApi.deleteOrder(order.orderId.toString());
              
              if (result.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
                this.refreshOrders();
              } else {
                throw new Error(result.msg || '删除订单失败');
              }
            } catch (error) {
              console.error('删除订单失败:', error);
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 刷新订单列表
    refreshOrders() {
      this.page = 1;
      this.orders = [];
      this.hasMore = true;
      this.loadOrders();
      this.loadOrderCounts();
    },

    // 加载更多
    loadMore() {
      if (!this.isLoading && this.hasMore) {
        this.loadOrders();
      }
    },

    // 处理二维码加载错误
    handleQRCodeError(event) {
      console.error('二维码加载错误:', event);
      uni.showToast({
        title: '二维码加载失败',
        icon: 'none'
      });
    },

    // 处理二维码加载成功
    handleQRCodeLoad(event) {
      console.log('二维码加载成功:', event);
    }
  }
}
</script>

<style lang="scss">
.order-list {
  min-height: 100vh;
  background-color: #f8f8f8;
  
  .status-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: 1rpx solid #eee;
    
    .status-item {
      position: relative;
      padding: 20rpx 0;
      
      text {
        font-size: 28rpx;
        color: #333;
      }
      
      .count {
        font-size: 24rpx;
        color: #999;
        margin-left: 4rpx;
      }
      
      &.active {
        text {
          color: #ff5500;
          font-weight: bold;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background-color: #ff5500;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .order-scroll {
    margin-top: 100rpx;
    
    .order-item {
      margin: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      
      &.highlight {
        border: 2rpx solid #ff5500;
      }
      
      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        .order-no {
          font-size: 24rpx;
          color: #666;
        }
        
        .order-status {
          font-size: 26rpx;
          font-weight: bold;
          
          &.status-pending-payment {
            color: #ff5500; // 待付款 - 橙色
          }
          
          &.status-pending-delivery {
            color: #2d8cf0; // 待发货 - 蓝色
          }
          
          &.status-pending-receive {
            color: #19be6b; // 待收货 - 绿色
          }
          
          &.status-completed {
            color: #999999; // 已完成 - 灰色
          }
          
          &.status-cancelled {
            color: #ed4014; // 已取消 - 红色
          }
          
          &.status-payment-failed {
            color: #ed4014; // 支付失败 - 红色
          }
          
          &.status-refunded {
            color: #999999; // 已退款 - 灰色
          }
          
          &.status-shipped {
            color: #2d8cf0; // 已发货 - 蓝色
          }
          
          &.status-paid {
            color: #19be6b; // 已支付 - 绿色
          }
          
          &.status-closed {
            color: #999999; // 已关闭 - 灰色
          }
        }
      }
      
      .order-goods {
        padding: 20rpx;
        
        .goods-item {
          display: flex;
          margin-bottom: 20rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }
          
          .goods-info {
            flex: 1;
            
            .goods-name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 10rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            
            .goods-spec {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 10rpx;
            }
            
            .price-quantity {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .price {
                font-size: 28rpx;
                color: #ff5500;
              }
              
              .quantity {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
        }
      }
      
      .order-amount {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 20rpx;
        border-top: 1rpx solid #f5f5f5;
        
        text {
          font-size: 26rpx;
          color: #666;
          margin-left: 20rpx;
          
          .amount {
            color: #ff5500;
            font-weight: bold;
          }
        }
      }
      
      .order-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 20rpx;
        border-top: 1rpx solid #f5f5f5;
        
        .btn {
          margin-left: 20rpx;
          padding: 0 30rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
          border-radius: 30rpx;
          
          &.default {
            color: #666;
            background-color: #f5f5f5;
          }
          
          &.primary {
            color: #fff;
            background-color: #ff5500;
          }
          
          &.cancel {
            color: #666;
            background-color: #fff;
            border: 1rpx solid #ddd;
          }
        }
      }
    }
    
    .loading-state, .empty-state {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 100rpx 0;
      
      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .load-more {
      text-align: center;
      padding: 20rpx 0;
      
      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 支付二维码弹窗样式 */
.qrcode-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.qrcode-popup {
  background: #fff;
  border-radius: 12rpx;
  width: 600rpx;
  padding: 30rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #eee;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .close-btn {
      font-size: 48rpx;
      color: #999;
      padding: 0 20rpx;
      line-height: 1;
      cursor: pointer;

      &:active {
        opacity: 0.7;
      }
    }
  }

  .qrcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;

    .qrcode-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .qrcode-image {
        width: 320rpx;
        height: 320rpx;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 8rpx;
      }
      
      .price {
        margin-top: 20rpx;
        font-size: 36rpx;
        color: #ff4d4f;
        font-weight: bold;
      }
    }

    .loading-wrapper {
      height: 320rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .loading {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .qrcode-footer {
    text-align: center;
    margin-top: 30rpx;
    
    .tip {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .order-number {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 20rpx;
    }

    .qrcode-buttons {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      
      .qr-btn {
        width: 80%;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        
        &.cancel {
          background-color: #f5f5f5;
          color: #666;
        }
      }
    }
  }
}
</style> 